<!--
 * @Author: your name
 * @Date: 2020-12-09 14:07:55
 * @LastEditTime: 2021-01-13 15:30:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\personalCenter\index.vue
-->
<template>
  <div class="w1200auto">
    <div class="mtb50 personalCenter">
      <ul class="personalMenu mr20 ptb10 s12">
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/">{{ $t("Account Dashboard") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/myOrders">{{ $t("My Orders") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/downloadableProduct">{{ $t("My Downloadable Products") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/wishList">{{ $t("My Wish List") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/addressBook">{{ $t("Address Book") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/accountInformation">{{ $t("Account Information") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/paymentMethods">{{ $t("Stored Payment Methods") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/billingAgreements">{{ $t("Billing Agreements") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/productReviews">{{ $t("My Product Reviews") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/newsletter">{{ $t("Newsletter Subscriptions") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/points">{{ $t("Reward Points") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/giftCard">{{ $t("Gift Card") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/savedCard">{{ $t("My Saved Cards") }}</nuxt-link></li>
        <li class="personalMenu_li"><nuxt-link class="pointer block ptb10 plr20 size12" to="/personalCenter/subscriptions">{{ $t("My Subscriptions") }}</nuxt-link></li>
      </ul>
      <div class="personalInfo relative">
          <nuxt-child></nuxt-child>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({route}) {
    return {
    }
  },
  watch: {
    $router(to, from) {
      if(to.fullPath !== to.fullPath) {
        console.log('to.fullPath :>> ', to.fullPath);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.personalCenter {
  @include flex();
  .personalMenu {
    width: 280px;
    background: $bgc-title;
    &_li:hover {
      background: $ceb;
    }
  }
  .personalInfo {
    width: 900px;
  }
  .nuxt-link-active {
    font-weight: bold;  
  }
}
</style>